
  @tabs-height: 50px;
  @tabs-backcolor: #f1f1f1;
  .tabs {
    position: relative;
    width: 100%;    
    height: @tabs-height;
    border-bottom: 2px solid #387FC8;
    background-color: @tabs-backcolor;
    
    ul {
      width: 100%;
      height: 100%;
      list-style: none;

      li {
        float: left;
        width: 85px;
        height: 100%;
        list-style: none;
        border-right: 1px solid #bbb;
        a {
          width: 100%;
          height: 100%;
          text-align: center;
          font: normal normal normal 16px/@tabs-height 'microsoft yahei';
          display: inline-block;
          text-decoration: none;
          &.focus, &:hover, &:active {
            text-decoration: none;
          }
        }

        &.action {
          a {
            color: #387FC8;
            background-color: #fff;
            &:active {
              background-color: #fff;
            }
          }
        }
        
        &:not(.action) {
          a {
            color: #000;        
            background: transparent;
            
            &:active {
              background-color: #f5f5f5;
            }
          }
        }
      }
    }
  }